<template>
  <a-layout-header class="header">
    <a-row>
      <a-col :span="2"><div class="logo"> 开发喵 </div></a-col>
      <a-col :span="18">
        <a-menu
            v-model:selectedKeys="selectedKeys1"
            theme="dark"
            mode="horizontal"
            class="menus"
            :style="{ lineHeight: '64px' }"
        >
          <a-menu-item key="1"><router-link to="/">首页</router-link></a-menu-item>
          <a-menu-item key="2" v-if="user.id != null"><router-link to="/admin/user">用户管理</router-link></a-menu-item>
          <a-menu-item key="3" v-if="user.id != null"><router-link to="/admin/ebook">电子书管理</router-link></a-menu-item>
          <a-menu-item key="4" v-if="user.id != null"><router-link to="/admin/category">分类管理</router-link></a-menu-item>
          <a-menu-item key="5"><router-link to="/about">关于我们</router-link></a-menu-item>
        </a-menu>
      </a-col>
      <a-col :span="4">
        <div class="login-container">
          <a-button @click="showLogin" v-if="user.id == null">登录</a-button>
          <span class="logo username" v-if="user.id != null">{{ user.name }}</span>
          <a-popconfirm title="确认要退出登录吗？" @confirm="logout"  v-if="user.id != null">
            <template #icon><question-circle-outlined style="color: red" /></template>
            <span style="color: white; cursor:pointer;">退出登录</span>
          </a-popconfirm>
        </div>
      </a-col>
    </a-row>

  </a-layout-header>

  <!-- 登录 -->
  <a-modal v-model:visible="visible" title="登录" :footer="null" :maskClosable="false">
    <a-form :model="user"
            :rules="rules"
            ref="myForm"
            @finish="handleOk"
    >
      <a-form-item label="登录名" name="loginName">
        <a-input v-model:value="user.loginName" placeholder="请输入登录名" allow-clear />
      </a-form-item>
      <a-form-item label="密码" name="password">
        <a-input-password v-model:value="user.password" placeholder="请输入密码" allow-clear />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">登录</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import {computed, ref} from "vue";
import axios from "axios";
import {message} from "ant-design-vue";
import {useStore} from "vuex";

export default {
  name: "the-header",
  setup(){
    const selectedKeys1 =  ref(['1']);


    const visible = ref(false);
    // 使用 vuex
    const store = useStore();
    // 不能直接赋值，computed 计算值
    const user = computed(() => { return store.state.user});

    const rules = {
      loginName: [
        {
          required: true,
          message: '请输入登录名',
          trigger: 'blur'
        },
        {
          min: 5,
          message: '登录名应该是 5 ~ 20 位',
          trigger: 'blur'
        },
        {
          max: 20,
          message: '登录名应该是 5 ~ 20 位',
          trigger: 'blur'
        },
      ],
      password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            message: '密码应该是 6 ~ 20 位',
            trigger: 'blur'
          },
          {
            max: 20,
            message: '密码应该是 6 ~ 20 位',
            trigger: 'blur'
          },
      ],
    };

    const showLogin = () =>{
       visible.value = true;
    }

    const handleOk = () => {
      user.value.password = hex_md5(user.value.password);

      axios.post('/login', user.value).then( (res) => {
        if (res.data.code == 200){
          let msg = "登录成功";

          // 保存成功
          message.success(msg);

          // 改变 vuex 中的值
          store.commit('setUser', res.data.data);

          visible.value = false;
        } else {
          // 保存失败
          message.error(res.data.message);
        }

      })
    }

    // 退出
    const logout = () =>{
      axios.get('/logout').then( (res) => {
        if (res.data.code == 200){
          let msg = "退出成功";

          // 保存成功
          message.success(msg);

          // 改变 vuex 中的值
          store.commit('setUser', {});

        } else {
          // 保存失败
          message.error(res.data.message);
        }

      })
    }

    return{
      selectedKeys1,
      showLogin,
      visible,
      user,
      rules,
      handleOk,
    logout
    }
  }
}
</script>

<style scoped>
.username{
  font-size:16px;
}
</style>